<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="center">
        <span class="title">您今天满意吗？</span>
      </el-row>
      <el-row :gutter="20" class="content" type="flex" justify="center" align="middle">
        <el-col v-for="(item, index) in rateList" :key="index">
          <img :src="item.imgSrc" alt="" :style="{width: '100%'}" @click="onSubmit(item.value)">
          <!-- <el-button type="success" icon="el-icon-check" circle @click="onSubmit">{{item.value}}</el-button> -->
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
  import { addPost } from '@/api/post'
  export default {
    data() {
      return {
        rateList: [
          {
            imgSrc: require('@/static/images/rate1.svg'),
            value: 4,
          },
           {
             imgSrc: require('../../static/images/rate2.svg'),
            value: 3,
          },
           {
             imgSrc: require('../../static/images/rate3.svg'),
            value: 2,
          },
           {
             imgSrc: require('../../static/images/rate4.svg'),
            value: 1,
          }
        ]
      }
    },
    created() {
      if (!sessionStorage.getItem('user')) {
        this.$router.push('/login')
      }
    },
    methods: {
      onSubmit(rate) {
        let user = JSON.parse(sessionStorage.getItem('user'))
        let post = {
          shopId: user.shopId,
          branchId: user.branchId,
          rate: rate,
          authorId: user.username
        }
        addPost(post).then(res => {
          sessionStorage.setItem('postId', res.data.id)
          this.$router.push('category')
        })
      }
    }
  } 
</script>
<style lang="scss" scoped>
  .el-container {
    flex: 1;
  }
  .el-main {
    display: flex;
    flex-direction: column;
  }
  .title {
    font-size: .3rem;
  }
  .content {
    flex: 1;
  }
</style>
